<template>
    <div ref="poolBar" style="width: 80%;height:350px;padding: 27px 55px"></div>
</template>

<script setup>
    import { ref, reactive ,onMounted,defineProps,watch} from 'vue';
    import * as echarts from 'echarts';
    //创建dom引用
    const {chartColor,chartTitle,xData,yData}=defineProps({//父传子参数
        chartColor:{
            type:String
        },
        chartTitle:{
            type:String
        },
        xData:{
            type:[]
        },
        yData:{
            type:Object
        }
    })
    onMounted(()=>{
        initPoolBar()
    })
    const poolBar=ref()
    //配置项
    const option =reactive( {
        color:chartColor||"#f3d19e",//设置柱状的颜色
        title:{//标题
            text:chartTitle||"农户贫困等级人数分布",//主标题
            textStyle:{
                fontSize:18,
            },
            left: "center",

        },
        legend:{//图例
            data:['人数'],
            left:'left'
        },
        tooltip: {//鼠标放上去显示具体数据
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // formatter:'{a}<br/> {b}:{c}'
            /* formatter:function (params) {
                 console.log(params)
                let data=params[0]
                 return '名称'+data.name+'<br/>'+'总销量'+data.value

             }*/

        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox:{
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                data: xData||['不贫困', '一般贫困', '中等贫困', '特殊贫困'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '人数',
                type: 'bar',
                barWidth: '60%',
                data: yData,
                label:{//标签显示
                    show:true,
                    position:'top',
                }
            }
        ]
    });

    //图一初始化
    const initPoolBar=()=>{
        //初始化echarts实例
        if (poolBar.value){
            let myChart = echarts.init(poolBar.value);
            //使用刚刚指定的配置项和数据显示图表
            myChart.setOption(option);
            //响应式图表自适应
            window.addEventListener('resize',()=>{
                myChart.resize();
            })
        }

    }



    watch(() => yData, (newValue, oldValue) => {
        console.log(`yData的值从 ${JSON.stringify(oldValue)} 变为了 ${JSON.stringify(newValue)}`);
        initPoolBar();
    }, {
        immediate: true,
        deep: true,
    });


</script>

<style scoped>



</style>